<template>
  <div class="mdui-card mdui-m-b-2 mdui-shadow-5 mdui-ripple mdui-hoverable">
    <!-- 卡片头部，包含头像、标题、副标题 -->
    <div class="mdui-card-header">
      <img class="mdui-card-header-avatar" :src="avatar_link" />
      <div class="mdui-card-header-title">{{ name }}</div>
      <div class="mdui-card-header-subtitle">{{sub_name}}</div>
    </div>
    <!-- 卡片的标题和副标题 -->
    <parallax-element :parallaxStrength="12" type="depth" tag="div">
      <div class="mdui-card-primary" @click="jump()">
        <div class="mdui-card-primary-title">{{title}}</div>
        <div class="mdui-card-primary-subtitle">{{sub_title}}</div>
      </div>
      <!-- 卡片的内容 -->
      <div class="mdui-card-content">
        <vue-markdown>{{content}}</vue-markdown>
      </div>
    </parallax-element>
    <!-- 卡片的按钮 -->
    <div class="mdui-card-actions">
      <button class="mdui-btn mdui-btn-icon mdui-float-right">
        <i class="mdui-icon material-icons">expand_more</i>
      </button>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import VueMarkdown from "vue-markdown";
export default Vue.extend({
  name: "user",
  components: { VueMarkdown },
  props: {
    avatar_link: String,
    name: String,
    sub_name: String,
    title: String,
    sub_title: String,
    content: String,
    link: String
  },
  methods: {
    jump: function () {
      window.location.href = this.link
      console.log(this.link)
    }
  }
});
</script>
